<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Traitor's Gate</title>
		
		<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
		
		<style type="text/css">
		body {
			background-color: #FFF;
			margin-left: auto;
			margin-right: auto;
			font: normal 12px Arial, Verdana, sans-serif; 
			color: #333;
			width: 75em;
		}
		div.srv_item {
			border: 1px solid #666;
			border-radius: 3px;
			margin: 5px 0;
			padding: 3px;
			cursor: pointer;
		}
		div.srv_item:hover {
			background-color: #EBEBEB;
			border: 1px solid #333;
			box-shadow: 1px 1px 5px #666;
		}
			div.srv_item em {
				margin-right: 5px;
			}
		</style>
		
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
		<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		
		<script type="text/javascript">
		jQuery(function() {
			jQuery("#languages_box").buttonset();
		});
		
		function callFromLang(lang) {
			jQuery.ajax({
				url: 'https://api.guildwars2.com/v1/world_names.json?lang='+lang,
				type: 'GET',
				dataType: 'json'
			}).done(function(data, textStatus, jqXHR) {
				jQuery('#lang').val(lang);
				jQuery('#servers_box').html('');
				jQuery('#eventlist_box').html('');
				data.sort();
				jQuery.each(data, function(index, object) {
					var in_html = '<div class="srv_item" onclick="callFromSrv(' + object.id + ');">';
					in_html += '<p><em>(' + object.id + ')</em>';
					in_html += object.name + '</p>';
					in_html += '</div>';
					jQuery('#servers_box').append(in_html);
				});
				jQuery('#servers_box').show();
				jQuery('#eventlist_box').hide();
			});
		}
		
		function callFromSrv(world_id) {
			var lang = jQuery('#lang').val();
			var map = {};
			jQuery.ajax({
				url: 'https://api.guildwars2.com/v1/event_names.json?lang='+lang,
				type: 'GET',
				dataType: 'json'
			}).done(function(data, textStatus, jqXHR) {
				data.sort();
				jQuery.each(data, function(index, object) {
					map[object.id] = object.name; 
				});
				jQuery.ajax({
					url: 'https://api.guildwars2.com/v1/events.json?world_id='+world_id,
					type: 'GET',
					dataType: 'json'
				}).done(function(data2, textStatus2, jqXHR2) {
					jQuery('#eventlist_box').html('');
					
					jQuery.each(data2.events, function(index2, object2) {
						var in_html = '<div class="ev_item">';
						in_html += '<p>' + map[object2.event_id] + ' ';
						in_html += '<em>(' + object2.state + ')</em></p>';
						in_html += '</div>';
						jQuery('#eventlist_box').append(in_html);
					});
					jQuery('#eventlist_box').show();
				});
			});
		}
		</script>
	</head>
	
	<body>
		<form name="form1">
			<input type="hidden" id="lang" value="" />
			<div id="languages_box" style="clear: both; margin: 1em 0;">
				<input type="radio" id="radioDE" name="radio" onclick="callFromLang('de');"><label for="radioDE">Deutsch (DE)</label>
				<input type="radio" id="radioEN" name="radio" onclick="callFromLang('en');"><label for="radioEN">English (EN)</label>
				<input type="radio" id="radioES" name="radio" onclick="callFromLang('es');"><label for="radioES">Espa&ntilde;ol (ES)</label>
				<input type="radio" id="radioFR" name="radio" onclick="callFromLang('fr');"><label for="radioFR">Fran&ccedil;ais (FR)</label>
			</div>
			<div id="servers_box" style="display: none; clear: both;"></div>
			<div id="eventlist_box" style="display: none; clear: both; margin: 1em 0; max-height: 200px; overflow: scroll;"></div>
		</form>
	</body>
</html>